<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
    #round2 {
      width: 300px;
      height: 27px;
      -webkit-border-image: url() 40 40 round;
    }

    .c2 {
      display: flex;
      width: 200px;
      height: 27px;
    }

    .c2::before {
      display: block;
      background: url() no-repeat left center;
      width: 13px;
      height: 27px;
      content: ' ';
    }

    .c2::after {
      display: block;
      background: url() no-repeat right center;
      width: 13px;
      height: 27px;
      content: ' ';
    }

    .c2 .c2ex {
      flex: 1;
      background: url() repeat-x center center;
      background-size: 5000px 27px;
      color: white;
    }
  </style>
</head>

<body>
  效果一：
  <img
    src="">
  <div id="round2">楼主要的效果并没有实现</div>

  <br /><br />
  效果二：
  <div style="display:flex;">
    <div class="c2">
      <div class="c2ex">是这样的么</div>
    </div>
  </div>
</body>

</html>